<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <div>
      <div id="tab">

        <ul class="tab_list" v-if="list && list.length > 0" :style="{minHeight: datas.is_tab_high ? '' :'100vh'}">
          <van-tabs v-model="active"
                    :sticky="sticky"
                    @change="onClick"
                    :background="datas.tab_bg_color"
                    :title-active-color="datas.tab_active_color"
                    :color="datas.tab_active_color"
                    :title-inactive-color="datas.tab_color">
            <van-tab :title="item.name || item.component" :name="i" v-for="(item, i) in list" :key="i">
              <div  v-if="show_page && active == i && item">
                  <component
                    :is="item.uikey"
                    :tabId = "item.id"
                    :id="id"
                    :index="i"
                    :page_id="page_id"
                    :datas="item.remote_data"
                    :component_key="'U_tabcontrol'"
                    :tabcontrol="true"
                    :isLast="isLast"
                    :isBottom="isBottom"
                    :store_id="store_id"
                    :tabIndex="tabIndex"
                  >
                  </component>
              </div>
              <template v-if="!show_page">
                <div :style="{backgroundColor: datas.tab_bg_color}" style="padding: 100px 15px; text-align: center;">
                  {{show_text}}
                </div>
              </template>
            </van-tab>
          </van-tabs>
        </ul>

        <div v-if="list.length <= 1 && list[0] && !list[0].list_id"
             style="padding: 100px 15px; text-align: center;" :style="{backgroundColor: datas.tab_bg_color}">
          暂无设置选项卡或数据
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import U_article from "components/new_diy/article";
import U_goods from "components/new_diy/goods";
import U_goodsgroup from "components/new_diy/goodsgroup";
import U_ywmgroup from "components/new_diy/ywmgroup";
import U_goodsnearby from "components/new_diy/goodsnearby";
import U_goodsrush from "components/new_diy/goodsrush";
import U_simplegraph from "components/new_diy/simplegraph";
import U_cube from "components/new_diy/cube";
import U_livestreaming from "components/new_diy/livestreaming";
import U_community from "components/new_diy/community";
import U_shortvideo from "components/new_diy/shortvideo";
import U_lottery from "components/new_diy/lottery";
import U_stores from "components/new_diy/stores";
import U_button from "components/new_diy/button";
import U_courseSupply from "components/new_diy/courseItem/courseList";
import U_tiktokCps from "components/new_diy/supplyChain/TikTokCps";
import U_travelAround from "components/new_diy/supplyChain/travelAround";
import U_yzSupplyCake from "components/new_diy/supplyChain/sachertorte";
import U_yzSupplyCamiloResources from "components/new_diy/supplyChain/ticketResources";
import U_unionCps from "components/new_diy/supplyChain/alliance";
import U_productAlbum from "components/new_diy/supplyChain/goodsAlbum";
import emptyImage from "../../assets/images/new_diy/banner.png";
// 自定义样式
const css = function() {
  const {
    tab_bg_color,
    tab_color,
    tab_active_color
  } = this.datas;

  return `
        .component-${this.id}  .nav-bgimage{
            background-color: ${tab_bg_color};
            color: ${tab_color};
        }

        .component-${this.id}  .nav-bgimage .nav-selected{
            color: ${tab_active_color};
            border-bottom: 2px solid ${tab_active_color};
        }
    `;
};

export default {
  data() {
    return {
      list: [],
      emptyImage,
      active: '0',
      show_text: '加载中...',
      show_page: true,
      isLast: false,

      sticky: false,
      tabIndex:0,
    };
  },
  props: ['isBottom', 'lastIndex', 'index', "page_id", "id", "datas", "component_key","store_id"],
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
  },
  created(){
    this.list = this.datas?.list || [];
  },
  mounted() {
    if(this.lastIndex == this.index) {
      this.isLast = true;
    }
    setTimeout(()=>{
      this.sticky = true;
    },500);
  },
  methods: {
    // 功能数据
    handleDatas (old_data) {
      // 如果有配置项的话
      if (old_data) {
        const datas = {};
        Object.keys(old_data).map(key => {
          datas[key] = old_data[key].value;
        });
        return datas;
      } else {
        return this.component.remote_data || {};
      }
    },
    onClick(index, title) {
      this.getTabData(index);
    },
    getTabData(index) {
      this.tabIndex = index;
      this.show_page = false;
      this.show_text = '加载中...';
      let _url = 'home-page.get-decorate-page';
      let json = {
        decorate_id: this.page_id || this.$store.state.temp.item.id,
        component_id: this.id,
        component_key: this.component_key,
        component_info: JSON.stringify({ list_key: index })
      };
      if(this.$route.query.store_id||this.store_id){
        json.store_id= this.$route.query.store_id||this.store_id;
        _url = 'plugin.store-decorate.frotend.decorate-api.get-decorate-page';
      }
      $http.post(_url,json, "loading")
        .then((response) => {
          if (response.result === 1) {
            this.list[index].remote_data = response.data[0].remote_data;
            this.show_page = true;
          } else {
            this.show_page = false;
            this.show_text = '后台没有设置数据或数据报错';
          }
        });
    }
  },
  components: {
    U_article,
    U_goods,
    U_goodsgroup,
    U_goodsnearby,
    U_goodsrush,
    U_simplegraph,
    U_cube,
    U_livestreaming,
    U_community,
    U_shortvideo,
    U_lottery,
    U_stores,
    U_ywmgroup,
    U_button,
    U_courseSupply,
    U_tiktokCps,
    U_travelAround,
    U_yzSupplyCake,
    U_yzSupplyCamiloResources,
    U_unionCps,
    U_productAlbum,
    U_assistCompetitionVote: () => import("@/components/new_diy/assist-competition-vote.vue")
  },
};
</script>

<style lang="scss" scoped>
  // 默认
  * {
    list-style-type: none;
  }

  .component-wrapper {
    width: 100%;
  }
</style>
